<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册|飞猪网</title>
    <jsp:include page="../common/common.jsp" />
    <link rel="stylesheet" href="/css/reg.css">

    <script>
        $().ready(function () {
            $("#duplicate_pswd").blur(
                function () {
                    let duplicate_pswd = $("#duplicate_pswd").val().trim()
                    let password = $("#password").val().trim()

                    if (duplicate_pswd != password || duplicate_pswd == "") {
                        $("#pswd_tips").show()
                        $("#pswd_tips_r").hide()
                    } else {
                        $("#pswd_tips").hide()
                        $("#pswd_tips_r").show()
                    }
                }
            )
        })
    </script>
</head>
<body>
<jsp:include page="../common/ceiling.jsp" />
<header>
    <h1>
        <span class="logo">飞猪</span>
        <span class="title">用户注册</span>
    </h1>
</header>
<nav>
    <ul class="clearfix">
        <li><span class="step">1</span>设置用户名</li>
        <li class="active"><span class="step  active-step">2</span>填写账号信息</li>
        <li><span class="step">3</span>注册成功</li>
    </ul>
</nav>
<article class="content">
    <!--url :fill_mobile-->
    <form method="post" action="/reg/user_info">
        <div class="row clearfix">
            <div class="col-r">手机号</div>
            <div class="col-l">
                <span>${user.tel}</span>
                <input type="hidden" name="tel" value="${user.tel}" />
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-r">邮箱</div>
            <div class="col-l">
                <span>${user.email}</span>
                <input type="hidden" name="email" value="${user.email}" />
            </div>
        </div>

        <%--用户名， password 性别，--%>
        <div class="row clearfix">
            <div class="col-r">用户名</div>
            <div class="col-l"><input type="text" name="username" /></div>
            <div class="hidden_" id="tel_tips">用户名已存在</div>
            <div class="hidden_" id="tel_tips_r"><span>√</span></div>
        </div>

        <div class="row clearfix">
            <div class="col-r">密&nbsp;&nbsp;码</div>
            <div class="col-l"><input type="password" name="password" id="password"></div>
        </div>

        <div class="row clearfix">
            <div class="col-r">密&nbsp;&nbsp;码</div>
            <div class="col-l"><input type="password" id="duplicate_pswd"></div>
            <div class="hidden_" id="pswd_tips">密码不一致</div>
            <div class="hidden_" id="pswd_tips_r"><span>√</span></div>
        </div>

        <div class="row clearfix">
            <div class="col-r">性&nbsp;&nbsp;别</div>
            <div class="col-l">
                <input type="radio" value="0" name="gender" style="width: 20px" /> 男
                <input type="radio" value="1" name="gender" style="width: 20px" /> 女
            </div>
        </div>

        <div class="row btns">
            <button type="submit" class="btn">下一步</button>
        </div>
    </form>
</article>
</body>
</html>